<template>
    <!-- 商品管理 -->
    <!-- 搜索框 -->
    <el-card shadow="never" style="margin-bottom:14px" :body-style="{ paddingBottom: '2px' }">
        <el-form   :model="searchdata"        :inline="true">
            <el-form-item label="商品分类">
                <el-cascader v-model="searchdata.classifiesId"
                :options="classifyData"  :props="{
                   
                   checkStrictly: true,
                     label: 'name',
                     value: '_id',
       
       
                }" 
                
                clearable />
            </el-form-item>
            <el-form-item label="分类名称">
                <el-input style="width: 250px;">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button  @click="getproductsdata"       type="primary">查询</el-button>
            </el-form-item>
        </el-form>

    </el-card>



    <!-- 表格 -->
    <el-card shadow="never">
        <!-- 按钮 -->
        <!-- <el-form :inline="true">
            <el-form-item  >
                <el-button type="primary" @click="diallogOpenss=true">添加商品</el-button>
                <el-button type="success">商品采集</el-button>
            </el-form-item>

            <el-form-item>
                <el-select style="width: 100px;"  placeholder="批量修改">
                    <el-option></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button>批量上架</el-button>
                <el-button>导出</el-button>
            </el-form-item>

        </el-form> -->
        <!-- 表格 内容-->
        <!-- 删除按钮 -->
        <div style="margin-bottom: 14px;">

            <el-button   v-hasPerm="'/products/add'"     type="primary"  @click="$router.push('/products/add')">
            添加商品
           </el-button>
          
          
          
            <el-button type="primary"  plain  @click="deleteconfirm">批量删除</el-button>
        </div>

        <!-- 表格 -->
        <BaseTable :data="tableData.rows" :columns="columns" :total="tableData.total" v-model="pageData"
            :checkbox="true" 
            @oncheckboxchange="oncheckboxchange">

            <template #image="{ row }">
                <img width="30px" height="30px" :src="row.image" alt="">
            </template>

            <!-- 状态显示插槽 -->
            <template #state="{ row }">
                <el-switch 
                v-model="row.state" 
                active-text="开启" 
                inactive-text="关闭" 
                inline-prompt 
                :active-value="1"
                :inactive-value="0">

                </el-switch>
            </template>
            <!--操作按钮插槽  -->

            <template #action="{row}">
                <router-link :to="`/products/update/${row._id}`"  
                >编辑</router-link>
               
            </template>

        </BaseTable>
    </el-card>



    <!-- 弹窗 -->
    <!-- <Products  v-model="diallogOpenss"/> -->




</template>

<script setup lang="ts">

import api from '@/api';
import { useFetchData } from '@/hooks/fetchData';
import { ElMessage, ElMessageBox } from 'element-plus';
import { watch, ref } from 'vue';
import { onMounted, reactive } from 'vue';





let { getClassifyDataAsync,classifyData}=useFetchData()



let columns = [
    { label: '商品图', prop: 'image', hasChildren: true, },
    { label: '商品名称', prop: 'name', hasChildren: true, },
    { label: '商品类型', prop: 'type', hasChildren: true, },
    { label: '商品售价', prop: 'price' },
    { label: '销量', prop: 'sale' },
    { label: '库存', prop: 'stock' },
    { label: '排序', prop: 'sort' },
    { label: '状态', prop: 'state' },
    { label: '操作', prop: 'action' }
]




let tableData = reactive({
    rows: [],
    total: 0
})

let pageData = ref({
    currentPage: 1,
    pageSize: 10
})

let checkedids = ref<string[]>([])

let searchdata=ref<any>({})






watch(pageData, () => {
    getproductsdata();
}, {
    deep: true
})



onMounted(() => {
    getproductsdata();
    getClassifyDataAsync();
})

let getproductsdata = async () => {
    let res = await api.products.search({
        ...pageData.value,
        ...searchdata.value
    });
    if (res.code == 200) {
        tableData.rows = res.data.rows;
        tableData.total = res.data.total;
    }


}



// //修改
// let onopendiallog=()=>{
//     diallogOpenss.value=true;
// }




let oncheckboxchange = (val: any[]) => {
 checkedids.value = val.map(item => item._id)
    console.log(val);
    
}





//删除前确认
let deleteconfirm = () => {
    ElMessageBox.confirm(
        '数据删除后不可恢复，确认删除',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //确认删除
            deletemany()
        })
        .catch(() => {
            
        })
}

let deletemany = async () => {
    // console.log('deletemany',checkedids.value);
    
    let res = await api.products.remove({
        _id: checkedids.value
    });
    if (res.code == 200) {
        ElMessage.success('商品数据删除成功');
        getproductsdata();
        checkedids.value = [];
    } else {
        ElMessage.error(res.message);
    }
}










</script>

<style scoped></style>